import { View, Text } from '@tarojs/components'
import React from 'react'
import './index.less'

export interface InfoCardProps {
  /** 图标 */
  icon: React.ReactNode
  /** 标题 */
  title: string
  /** 描述 */
  description?: string
  /** 列表项 */
  items?: string[]
  /** 图标背景色 */
  iconBackground?: string
  /** 图标颜色 */
  iconColor?: string
  /** 点击事件 */
  onClick?: () => void
  /** 自定义类名 */
  className?: string
}

/**
 * InfoCard 信息卡片组件
 * 用于展示带图标的信息卡片
 */
const InfoCard: React.FC<InfoCardProps> = ({
  icon,
  title,
  description,
  items,
  iconBackground = '#f0f0f0',
  iconColor = '#52c41a',
  onClick,
  className = '',
}) => {
  return (
    <View className={`info-card ${onClick ? 'clickable' : ''} ${className}`} onClick={onClick}>
      <View className='info-card-header'>
        <View className='info-icon' style={{ backgroundColor: iconBackground }}>
          <Text className='icon-content' style={{ color: iconColor }}>
            {icon}
          </Text>
        </View>
        <Text className='info-title'>{title}</Text>
      </View>
      {description && <Text className='info-description'>{description}</Text>}
      {items && items.length > 0 && (
        <View className='info-list'>
          {items.map((item, index) => (
            <View key={index} className='list-item'>
              <Text className='list-dot'>•</Text>
              <Text className='list-text'>{item}</Text>
            </View>
          ))}
        </View>
      )}
    </View>
  )
}

export default InfoCard

